<template>
    <div class="dashboard-container">
        <div id="baiduMap" :style="{width: '100%', height: height}"></div>
        <div class="left">
            <div v-if="is_left_show">
                <el-select size="mini" v-model="house_type" placeholder="请选择类型" style="margin-bottom: 10px;" @change="handleChangeYT">
                    <el-option v-for="item in tradList" :label="item.label" :value="item.value" :key="item.value"></el-option>
                </el-select>
                <el-select size="mini" v-model="params.rentFlag" placeholder="请选择类型" style="margin-bottom: 10px;"  @change="handleChangeYT">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="租金" value="1"></el-option>
                    <el-option label="不含租" value="0"></el-option>
                </el-select>
                <el-select @change="changeTradeType" size="mini" clearable v-model="params.tradeType" placeholder="请选择交易情况" style="margin-bottom: 10px;">
                    <el-option v-for="item in TransactionSituationList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
                <el-select size="mini" @change="changeCity" v-model="params.cityId" placeholder="请选择城市" style="margin-bottom: 10px;">
                    <el-option v-for="item in cityList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
                <el-select size="mini" clearable @change="changeArea" v-model="params.areaId" placeholder="请选择区县" style="margin-bottom: 10px;">
                    <el-option v-for="item in areaList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
                <el-select size="mini" clearable v-model="params.streetId" placeholder="请选择街道" style="margin-bottom: 10px;">
                    <el-option v-for="item in jdList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </div>
            <el-autocomplete
                placeholder="请输入地址" 
                v-model="address" 
                style="width: 200px;margin-bottom: 10px;"
                clearable
                size="mini"
                :fetch-suggestions="querySearchAsync"
                @select="handleSelectAddress"
            ></el-autocomplete>
            <el-select size="mini" v-model="radius" placeholder="请选择半径" v-if="address" style="margin-bottom: 10px;">
                <el-option v-for="item in radiusList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <el-button size="mini" type="primary" @click="handleSerch">
                筛选
                <i class="el-icon-search"></i>
            </el-button>
            <el-button size="mini"  type="primary" v-if="is_left_show" @click="is_left_show=!is_left_show">
                <i class="el-icon-arrow-down"></i>
            </el-button>
            <el-button  size="mini"  type="primary" v-else @click="is_left_show=!is_left_show">
                <i class="el-icon-arrow-up"></i>
            </el-button>
            <!-- 卫星模式 -->
            <div style="padding-top: 10px;">
                <el-switch
                    v-model="swtab"
                    active-color="#039A92"
                    active-text="卫星模式"
                    inactive-text="标准模式"
                    @change="handeleSw"
                >
                </el-switch>
            </div>
        </div>
        <div class="center">
            用途：
          <span @click="handleSelectPattern('')" :class="{item: true, active: yt_type ==''?true:false}" >全部</span>
          <span 
            :class="{item: true, active: yt_type==item.value?true:false}" 
            @click="handleSelectPattern(item.value)" v-for="item in ytList" :key="item.value"
          >{{ item.label }}</span>
        </div>
        <div class="right">
            <div class="top">
                共 <span style="color: #039A92; font-weight: bold;">{{total}}个案例</span>
                <span style="float: right; overflow: hidden;">
                    <el-button size="mini" type="primary" @click="handleExport" v-loading="exportLoading">
                        <i class="el-icon-upload"></i>
                        导出
                    </el-button>
                    <el-button size="mini" type="primary" v-if="is_show" @click="is_show=!is_show">
                        <i class="el-icon-arrow-down"></i>
                    </el-button>
                    <el-button size="mini" type="primary" v-else @click="is_show=!is_show">
                        <i class="el-icon-arrow-up"></i>
                    </el-button>
                </span>
            </div> 
            <div class="content" v-if="is_show&&list.length>0">
                <div class="list">
                    <div v-for="(item,index) in list" :key="index" class="item" style="cursor: pointer;" @click="handleSelectCase(item)">
                        <div class="item_content">
                            <p class="name" v-if="!item.communityId">{{ item.name }}</p>
                            <p class="name" v-else>{{ item.community.name }}</p>
                            <p class="desc" v-if="item.detailAddress">地址：{{item.detailAddress}}</p>
                            <p class="desc" v-if="item.mj">土地面积：{{ item.mj }}㎡</p>
                            <p class="desc" v-if="item.jzmj">建筑面积：{{ item.jzmj }}㎡</p>
                            <p class="desc" v-if="item.cjDate">成交日期：{{ item.cjDate }}</p>
                            <p class="desc" v-if="item.cjmj">成交单价：{{ item.cjmj }}万元/亩</p>
                            <p class="desc" v-if="item.fdhyPrice">房地合一成交单价：{{ item.fdhyPrice }}元/㎡</p>
                            <p class="desc" v-if="item.dayZj">日租金：{{ item.dayZj }}元/㎡/日</p>
                            <p class="price">成交总价格：{{item.price>0?item.price+'万元': '暂无报价'}}</p>
                        </div>
                        
                    </div>
                </div>
                <div class="pages">
                    <el-pagination
                        @current-change="handleCurrentChange"
                        :current-page="params.pageIndex+1"
                        :page-size="params.pageCount"
                        layout="prev, pager, next"
                        small
                        :total="total">
                    </el-pagination>
                </div>
            </div>
        </div>
        <!-- 交易情况图例 -->
        <div class="case">
            交易情况图例：
            <span class="circle" style="background: linear-gradient(270deg, #C00F0C 0%, #F32B2B 100%);"></span>
            <span>司法拍卖</span>
            <span class="circle"></span>
            <span>一手出让</span>
            <span class="circle" style="background: linear-gradient(270deg, #009951 0%, #039A92 100%);"></span>
            <span>评估案例</span>
            <span class="circle" style="background: linear-gradient(270deg, #37EBFF 0%, #0A6BB0 100%);"></span>
            <span>买卖成交</span>
            <span class="circle" style="background: linear-gradient(270deg, #6A7FF3 0%, #9A6DF2 100%);"></span>
            <span>资产交易</span>
        </div>
        <!-- 案例导出 -->
        <el-dialog title="案例导出" :visible="dialogVisibleExport" width="800px" @close="dialogVisibleExport=false" :close-on-click-modal="false">
            <el-form >
                <el-form-item label="案例对象"  required>
                    <el-select clearable filterable v-model="exportParams.propertyType" placeholder="请选择" style="width: 100%;" @change="handleChangeExportType">
                        <el-option v-for="item in TARGET_TYPE_LIST" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="固定字段" v-if="fixedFields.length>0">
                    <el-checkbox  v-model="checkAllFixed" @change="(val)=>handleCheckAllChange('fixed', val)" >全选</el-checkbox>
                    <el-checkbox-group v-model="showFixedFields">
                        <el-checkbox v-for="field in fixedFields" :label="field" :key="field">{{field}}</el-checkbox>
                    </el-checkbox-group> 
                </el-form-item>
                <el-form-item label="自定义字段" v-if="customFields.length>0">
                    <el-checkbox v-model="checkAllCustom" @change="(val)=>handleCheckAllChange('custom', val)" >全选</el-checkbox>
                    <el-checkbox-group v-model="showCustomFields">
                        <el-checkbox v-for="field in customFields" :label="field" :key="field">{{field}}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-form>
            <div>
                <el-button type="primary" @click="submitExport" v-loading="loadingExport">导出</el-button>
                <el-button @click="dialogVisibleExport = false">关闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { targetGetList, targetGetCollection, targetInfo, targetGetExportFieldOptions } from '@/api/target'
import { commonGetAreaList, commonGetCityList } from '@/api/common'
import { enumInfo } from '@/api/enum'
import { TARGET_TYPE_LIST, TransactionSituationList, API_BASE_URL, OSS_BASE_URL } from '@/utils/common'
import { statisticGetGeoDataList } from '@/api/statistic'
import { patternGetList } from '@/api/pattern';
import axios from 'axios'
import { transfromData, transFormValue } from '@/utils/tools'
import { regionPriceGetList } from '@/api/region'
import moment from 'moment'
import { parkGetCollection, parkInfo } from '@/api/park'
import { communityGetList, communityGetCollection } from '@/api/community'

let map;
let customOverlay; //地图覆盖物
let closeOverlay; // 覆盖物关闭按钮

export default { 
  name: 'MapLook',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data(){
    return {
        OSS_BASE_URL,
        API_BASE_URL,
        height: '700px',
        TARGET_TYPE_LIST,
        TransactionSituationList,
        params: {
            provinceId: 11,
            cityId: 87,
            areaId: '',
            streetId: '',
            propertyTypes: '[102]',
            radius: '',
            centerLatitude: '',
            centerLongitude: '',
            tradeTypes: '', //是否显示租金
            rentFlag: '',
        },
        exportParams: {},
        cityList: [],
        areaList: [],
        jdList: [],
        list: [],
        total: 0,
        is_show: true,
        statistDataList: [],
        showCase: [],
        AreaStreetList: [], //获取城市的区域及街道数据
        address: '',
        is_left_show: true,
        cityName: '杭州市',
        areaName: '', //区的名称
        caseList: [],
        caseCity: '',
        radius: 5000,
        radiusList: [
            { label: '5km', value: 5000 },
            { label: '10km', value: 10000 },
            { label: '15km', value: 15000 },
        ],
        collectParams: {
            propertyTypes: '[102]',
            cityId: 87,
            tradeTypes: ''
        },
        swtab: 0,
        PatternList: [], //用途列表
        jyList: [], //交易情况列表
        ytList:[
            { label: '工业', value: 1 },
            { label: '住宅', value: 2 },
            { label: '商业/办公', value: 3 }
        ],
        house_type: '2', //房地产 土地 小微园 区片价
        yt_type: '1',  // 工业 住宅 商业办公
        exportLoading: false,
        tradList: [
            { label: '房地产', value: '1' },
            { label: '土地', value: '2' },
            { label: '小微园', value: '3' },
            { label: '区片价', value: '4' },
        ],
        is_clear: false,
        AreaPointList: [],
        dialogVisibleExport: false,
        loadingExport: false,
        customFields: [], //自定义字段-列表
        fixedFields: [],//固定字段-列表
        showCustomFields: [], //自定义字段-已选择
        showFixedFields: [], //固定字段-已选择
        checkAllFixed: false,
        checkAllCustom: false,
        recentChecked: false,
        communityName: '',
        selectItem: {},
        xwyShowCase: []
    }
  },
  created(){
    // 地图适配屏幕高度
    this.height = (window.innerHeight - 45) + 'px'
  },
  async mounted(){
    //开始获取一下全部点位
    this.getCollection();
    let data = await commonGetCityList({ geoLevel: 2, provinceId: 11 });
    this.cityList = data;
    map = new BMapGL.Map("baiduMap");
    var point = new BMapGL.Point(120.264267, 30.1841); // 地图中心点坐标
    map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
    map.setMapStyleV2({     
        // styleId: 'f4ff327e2def6fec64efbbcd86aab1ad'
    });
    // 打开地图缩放
    map.enableScrollWheelZoom(true);
    this.changeCity(87)
    this.handleSerch();

    // 监听百度地图的缩放
    map.addEventListener('zoomend', (e)=>{
        if(this.house_type==4||(this.house_type==1&&this.yt_type==2))return;
        if(map.getZoom()>17){
            map.clearOverlays();
            this.is_clear = true;
            this.showCaseMap();
            if(this.address){
                var point = new BMapGL.Point(this.params.centerLongitude, this.params.centerLatitude); // 地图中心点坐标
                var marker = new BMapGL.Marker(point);        // 创建标注   
                map.addOverlay(marker);
                //判断有没有选择半径，然后画圆圈
                if(this.radius>0){
                    var circle = new BMapGL.Circle(
                        point,this.radius,{
                        strokeColor:"red", 
                        strokeWeight:2, 
                        strokeOpacity:0.5
                    }); //创建圆
                    map.addOverlay(circle);
                }
            }
        }else if(map.getZoom()<13){
            if(!this.is_clear)return;
            if(this.params.areaId){
                // 当前条件是区县，则显示街道
                let area = this.areaList.filter(item=>this.params.areaId==item.id)[0]
                let streets = this.AreaStreetList.filter(item=>item.name==area.name)[0].streets;
                
                this.setStreetMap(streets)
            }else if(this.params.cityId){
                // 当前条件是城市，则显示区县
                let city = this.cityList.filter(item=>this.params.cityId==item.id)[0]
                let nameList = this.areaList.map(item=>item.name)
                // 设置地图区
                this.setAreaMap(nameList, city.name)
            }  
            this.is_clear = false;
        }
    })
    //监听地图点击事件
    map.addEventListener('click', (e)=>{
        if(e.overlay==null){
            //删除覆盖物
            this.removeCuston();
        }
    })

  },

  methods:{
    removeCuston(){
        map.removeOverlay(customOverlay);
        map.removeOverlay(closeOverlay);
    },
    //选择了联想搜索
    handleSelectAddress(){
        this.handleSerch();
    },
    querySearchAsync(queryString, cb){
        var options = {
            onSearchComplete: async (results)=>{
                // 判断状态是否正确
                if (local.getStatus() == BMAP_STATUS_SUCCESS){
                    let resultsFinish = results._pois.map(item=>{
                        return { value: item.title }
                    })
                    cb(resultsFinish); 
                }         
            }
        }

        var local = new BMapGL.LocalSearch(map, options);
        local.search(this.cityName + queryString);
        
    },
    // 搜索小区返回目标结果
    async handleSelect(item){
        // 对地图做一下标点，并且右侧显示小区案例
        let { longitude, latitude, id } = item;
        this.selectItem = item;
        this.pointCommouncity(longitude, latitude)
        // 请求该小区的案例
        this.params.communityId = id;
        this.getData();
    },
    //定位至某个坐标点
    pointCommouncity(longitude, latitude){
        var point = new BMapGL.Point(longitude, latitude); // 地图中心点坐标
        map.centerAndZoom(point, 16);  
        var marker = new BMapGL.Marker(point);        // 创建标注   
        map.addOverlay(marker);
    },
    //全选按钮
    handleCheckAllChange(name, val) {
        if(name=='fixed'){
            this.showFixedFields = val ? this.fixedFields : [];
        }
        if(name=='custom'){
            this.showCustomFields = val ? this.customFields : [];
        }
    },
    //提交导出
    async submitExport(){
        this.loadingExport = true;
        let params = JSON.parse(JSON.stringify(this.exportParams))
        params.showCustomFields = this.showCustomFields;
        params.showFixedFields = this.showFixedFields;
        let TypeName = transfromData(TARGET_TYPE_LIST, params.propertyType);
        axios({
            url: `${API_BASE_URL}/target/export${transFormValue(params)}`,
            method: 'POST',
            responseType: 'blob'
        }).then((res) => {
            const blob = res.data
            const fileName = moment().format('YYYY-MM-DD') + TypeName +'案例导出.xlsx'
            const elink = document.createElement('a')
            elink.download = fileName
            elink.style.display = 'none'
            elink.href = window.URL.createObjectURL(blob)
            document.body.appendChild(elink)
            elink.click()
            window.URL.revokeObjectURL(elink.href)// 释放对象
            document.body.removeChild(elink)// 移除元素
            this.loadingExport = false;
        })
    },
    //选择导出的类型
    async handleChangeExportType(){
        let data = await targetGetExportFieldOptions({ propertyType: this.exportParams.propertyType })
        let { customFields, fixedFields } = data;
        this.customFields = customFields.map(item=>item.name).sort();
        this.fixedFields =  fixedFields;
        this.showCustomFields = [];
        this.checkAllFixed = false;
        this.checkAllCustom = false;
    },
    //点击导出
    async handleExport(){
        this.exportParams = JSON.parse(JSON.stringify(this.params));
        this.showCustomFields = [];
        this.showFixedFields = [];
        this.customFields = [];
        this.fixedFields = [];
        
        this.dialogVisibleExport = true;
    },
    //点击选中按钮
    handleSelectCase(item){
        if(item.communityId)return;

        let that = this;
        let { longitude, latitude } = item;
        var point = new BMapGL.Point(longitude, latitude); // 地图中心点坐标
        map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别

        //在添加钱先删除一遍覆盖物
        that.removeCuston();

        // 创建自定义覆盖物
        customOverlay = new BMapGL.CustomOverlay(()=>that.createDOM(item), {
            point,
            opacity: 0.5,
            map: map,
            offsetY: -60,
            offsetX: 10,
            properties: {
                title: 'this is a title',
                size: '100'
            }
        });
        
        // 将自定义覆盖物添加到地图上
        map.addOverlay(customOverlay);
        // coding 同时创建一个覆盖物的关闭按钮

    },

    //当用途用途发生改变时
    handleChangeYT(){
        let type = [];
        if(this.house_type==1){ 
            if(this.yt_type==""){
                // 所有房地产的筛选条件
                type = '[1, 2, 3, 4]'
            }
            if(this.yt_type==1){
                // 工业房地产
                type = '[2]'
            }
            if(this.yt_type==2){
                // 住宅房地产
                type = '[1]'
            }
            if(this.yt_type==3){
                // 办公\商业房地产
                type = '[3, 4]'
            }   
        }else if(this.house_type==2){
            if(this.yt_type==""){
                // 所有土地的筛选条件
                type = '[101, 102, 103, 104]'
            }
            if(this.yt_type==1){
                // 工业土地
                type = '[102]'
            }
            if(this.yt_type==2){
                // 住宅土地
                type = '[101]'
            }
            if(this.yt_type==3){
                // 办公\商业土地
                type = '[103, 104]'
            }   
        }else if(this.house_type==3){
            //小微园 -仅限工业
        }else if(this.house_type==4){
            // 区片价
            type = '[102]';
        }
        this.collectParams.propertyTypes = this.params.propertyTypes = type
        this.collectParams.rentFlag = this.params.rentFlag
       
        // 清除之前的叠加层
        map.clearOverlays();
        this.getCollection();
    },
    // 获取要展示div节点
    getDivDom(fields, name, title){
        let temp = fields.filter(field=>field.field.name==name) 
        if(temp.length>0){
            temp[0].decimalValue
            let value = '';
            //longValue  decimalValue stringValue
            if(temp[0].field.valueType==0){
                // 数字
                value = temp[0].decimalValue
            }
            if(temp[0].field.valueType==2){
                //字符串
                value = temp[0].stringValue
            }
            if(temp[0].field.valueType==1){
                value = moment(temp[0].longValue).format('YYYY-MM-DD')
            }
            return `<div 
                style="margin-bottom: 7px; color: #999; 
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 20; /* 限制行数为2 */
                overflow: hidden;
                font-size: 14px;">
                <span style="color: #000;">${title}：</span>${value}</div>`;
        }else{
            return '';
        }
        
    },
    // 创建案例点坐标
    createDOM(item) {
        //判断是否存在交易情况，如果不存在则默认第一种
        let tadeTypeItem = TransactionSituationList.filter(tItem=>tItem.value==item.tradeType)
        let bgColor = tadeTypeItem.length>0?tadeTypeItem[0].bgColor:TransactionSituationList[0].bgColor;
        let typeName = transfromData(TARGET_TYPE_LIST, item.type)
        let tradeName = transfromData(TransactionSituationList, item.tradeType)
        const div = document.createElement('div');
        div.style.width = '220px';
        div.style.padding = '15px';
        div.style.borderRadius = '10px';
        div.style.background = '#FFFFFF linear-gradient(180deg, rgba(27, 183, 175, 0.2) 0%, rgba(27, 183, 175, 0) 15%)';
        div.style.position = 'relative';
        let mj = this.getDivDom(item.fields, '土地面积', '土地面积（㎡）')
        let date = this.getDivDom(item.fields, '成交日期', '成交日期')
        let price = this.getDivDom(item.fields, '成交单价', '成交单价(元/㎡)')
        let cjmj = this.getDivDom(item.fields, '成交亩价', '成交亩价(万元/亩)')
        let amount = this.getDivDom(item.fields, '成交总价', '成交总价(万元)')
        let number = this.getDivDom(item.fields, '报价次数', '出价数：')
        let pgPrice = this.getDivDom(item.fields, '报评估单价价次数', '评估单价(元/㎡)')
        let appendage = this.getDivDom(item.fields, '附属物及设备评估价值', '附属物及设备价值(万元)')
        let buildArea = this.getDivDom(item.fields, '建筑物面积', '建筑面积（㎡）')
        let xzhmj = this.getDivDom(item.fields, '修正后标准亩价', '修正后标准亩价');

        //小微园字段显示
        let parkTypeName = this.getDivDom(item.fields, '园区类型', '园区类型');
        let parkBaseDesc = this.getDivDom(item.fields, '园区基本信息', '园区基本信息');
        let parkRent = this.getDivDom(item.fields, '首层月租金', '首层月租金');
        let parkOtherRent = this.getDivDom(item.fields, '其他楼层月租金', '其他楼层月租金');
        

        //工业、一手出让特殊的情况，写在备注里面
        let remark = this.getDivDom(item.fields, '备注', '备注');

        let maxRJLItem =  item.fields.filter(field=>field.field.name=='规划最大容积率') 
        let minRJLItem =  item.fields.filter(field=>field.field.name=='规划最小容积率') 
        let unitRent = '';
        if(item.unitRent>0){
            //日租金如果有
            unitRent = `<div style="margin-bottom: 7px; color: #999; font-size: 14px;"><span style="color: #000;">日租金（元/㎡/日）：</span>${item.unitRent}</div>`
        }
        let RJL = '';
        if(maxRJLItem.length>0&&minRJLItem.length>0){
            RJL = `<div style="margin-bottom: 7px; color: #999; font-size: 14px;"><span style="color: #000;">容积率：</span>${minRJLItem[0].decimalValue}-${maxRJLItem[0].decimalValue}</div>`
        }
        if(maxRJLItem.length>0&&minRJLItem.length==0){
            //只有最大的情况
            RJL = `<div style="margin-bottom: 7px; color: #999; font-size: 14px;"><span style="color: #000;">容积率：</span>≤${maxRJLItem[0].decimalValue}</div>`
        }
        if(minRJLItem.length>0&&maxRJLItem.length==0){
            //只有最大的情况
            RJL = `<div style="margin-bottom: 7px; color: #999; font-size: 14px;"><span style="color: #000;">容积率：</span>≥${minRJLItem[0].decimalValue}</div>`
        }
        let detailAddress = item.detailAddress ? `<div style="margin-bottom: 7px; color: #999; line-height: 20px; font-size: 14px;" ><span style="color: #000;">坐落地址：</span>${item.detailAddress}</div>`: ""
        let tradeNameDiv = '';
        // 判断他的交易情况
        if(tradeName!=""){
            tradeNameDiv = `<span 
                style="position: absolute; 
                right: 0; 
                top: 0; 
                height: 21px;
                line-height: 21px;
                color: #fff;
                text-alight: center;
                padding: 0 5px;
                border-radius: 0 10px 0 10px;
                font-size: 12px;
                font-weight: bold;
                background: ${bgColor}"
            >${tradeName}</span>`;
        }
        //如果是小微园，也加上标签
        if(item.is_park==1){
            tradeNameDiv = `<span 
                style="position: absolute; 
                right: 0; 
                top: 0; 
                height: 21px;
                line-height: 21px;
                color: #fff;
                text-alight: center;
                padding: 0 5px;
                border-radius: 0 10px 0 10px;
                font-size: 12px;
                font-weight: bold;
                background: ${bgColor}"
            >小微园</span>`;
        }
        let str = `
            <div style="margin-bottom: 10px; padding-top: 10px;font-weight: bold;">${typeName}</div>
            <div style="margin-bottom: 7px; color: #333; font-size: 14px;">${item.name}</div>
            ${parkTypeName}
            ${parkRent}
            ${parkOtherRent}
            ${detailAddress}
            ${date}
            ${price}
            ${cjmj}
            ${amount}
            ${pgPrice}
            ${appendage}
            ${mj}
            ${buildArea}
            ${number}
            ${RJL}
            ${xzhmj}
            ${unitRent}
            ${tradeNameDiv}
            ${parkBaseDesc}
            ${remark}
            `;

        let CountPriceItem = item.fields.filter(field=>field.field.name=='评估总价')
        if(CountPriceItem.length>0){
            str+=`
            <div style="font-size: 14px; margin-bottom: 10px;">评估总价（万元）：<span style="color: #000;">${CountPriceItem[0].decimalValue}</span></div>
            `
        }
        let fdhyPriceItem = item.fields.filter(field=>field.field.name=='房地合一成交单价')
        if(fdhyPriceItem.length>0){
            str+=`
            <div style="font-size: 14px; margin-bottom: 10px;">房地合一单价(元/㎡)：<span style="color: #000;">${fdhyPriceItem[0].decimalValue}	
</span></div>
            `
        }
        let CaseUrlItem = item.fields.filter(field=>field.field.name=='案例网址')
        if(CaseUrlItem.length>0){
            str += `<a href="${CaseUrlItem[0].stringValue}" target="__blank"><div 
                style="font-size: 14px;text-align: center;color: #039A92;border: 1px solid #039A92;height: 25px;line-height: 25px;border-radius: 5px;"
            >
                查看详情
            </div></a>`
        }
        div.innerHTML = str;
        return div;
    },
    close(){
        console.log(111)
    },
    //修改交易情况
    changeTradeType(val){
        this.collectParams.tradeTypes = val ? '[' + val + ']' : '';
        this.params.tradeTypes = val ? '[' + val + ']' : '';
        // 清除之前的叠加层
        map.clearOverlays();
        this.getCollection();
    },
    // 修改用途
    handleSelectPattern(val){
        this.yt_type = val;
        if(val==1){
            this.tradList = [
                { label: '房地产', value: '1' },
                { label: '土地', value: '2' },
                { label: '小微园', value: '3' },
                { label: '区片价', value: '4' }
            ]
        }else{
            this.tradList = [
                { label: '房地产', value: '1' },
                { label: '土地', value: '2'}
            ]
        }
        //统一修改
        this.handleChangeYT();
        
    },
    // 全景平面切换
    handeleSw(){
        if(this.swtab==0){
            map.setMapType(BMAP_NORMAL_MAP); 
        }else{
            //切换卫星地图
            map.setMapType(BMAP_SATELLITE_MAP); 
        }
    },
    // 获取地图点集合，全部地图
    async getCollection(){
        let data = [];
        this.xwyShowCase = [];
        if(this.house_type==1||this.house_type==2){
            if(this.yt_type==2){
                //
            }else{
                //房地产、土地走案例列表
                data = await targetGetCollection(this.collectParams);
            }
            
        }else if(this.house_type ==3){
            //小微园
            let parkData = await parkGetCollection(this.collectParams)
            this.xwyShowCase = parkData;
        }
        
        this.showCase = data
        this.showCaseMap();
    },
    //随机获取颜色
    getRandomColor() {
      var letters = "0123456789ABCDEF";
      var color = "#";
      for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color + '33';
    },
    // 要渲染的区域名列表  ['拱墅区', '上城区','萧山']
    setAreaMap(list, cityName){
        //如果是住宅房地产，则不显示了
        list.forEach(name=>{
            if(name){
                let AreaPointList = this.AreaPointList.filter(item=>item.name==name)[0].points;
                
                var fillColor = this.getRandomColor();
                for(let key in AreaPointList){
                    let pointList = [];
                    let lon;
                    let lat;
                    AreaPointList[key].forEach((Area, index)=>{
                        if(index%2==0){
                            lon = Area;
                        }else{
                            lat = Area;
                            pointList.push(new BMapGL.Point(lon,lat))
                        }
                    })
                    var cc = new BMapGL.Polygon(pointList, {
                        strokeWeight: 2,
                        strokeColor: "#FF0000",
                        fillColor: fillColor
                    })
                    map.addOverlay(cc);
                }
                
                
                var myGeo = new BMapGL.Geocoder();
                let area = this.areaList.filter(item=>item.name==name)[0];
                let statist = this.statistDataList.filter(item=>item.areaId==area.id);
                let targetCount = 0;
                if(statist.length>0){
                    statist.forEach(item=>{
                        targetCount += item.targetCount;
                    })
                }
                if(targetCount>0){
                    targetCount = ' ' + targetCount +'个案例'
                }else{
                    targetCount = '';
                }
                let that = this;
                myGeo.getPoint(cityName + name, function(point){
                    var content = name + targetCount;
                    // 设置文字
                    var label = new BMapGL.Label(content, {       // 创建文本标注
                        position: point,                          // 设置标注的地理位置
                        // offset: new BMapGL.Size(10, 20)           // 设置标注的偏移量
                    })  
                    
                    map.addOverlay(label); 
                    label.setStyle({                              // 设置label的样式
                        color: '#fff',
                        fontSize: '14px',
                        background: '#014C4F',
                        border: 'none',
                        padding: '5px',
                        borderRadius: '10px'
                    })

                    label.addEventListener("click", async () => {
                        that.params.areaId = that.areaList.filter(item=>item.name==name)[0].id;
                        that.changeArea(that.params.areaId)
                        that.handleSerch();
                    })
                })
            }
        })
    },
    //设置街道
    setStreetMap(streets){
        if(!streets)return;
        let that = this;
        // 设置街道
        streets.forEach(street=>{
            
            var fillColor = this.getRandomColor();
            // 处理街道的点位数据
            for(let key in street.points){
                let lon;
                let lat;
                let pointList = [];
                if (street.points.hasOwnProperty(key)) {
                    street.points[key].forEach((item,index)=>{
                        if(index%2==0){
                            lon = item;
                        }else{
                            lat = item;
                            pointList.push(new BMapGL.Point(lon,lat))
                        }
                    })
                    var cc = new BMapGL.Polygon(pointList, {
                        // strokeWeight: 1,
                        // strokeColor: "#FF0000",
                        strokeOpacity: 0,
                        fillColor: fillColor
                    })
                    map.addOverlay(cc);
                }
            }
            // 文字打点
            var point;
            if(street.longitude&&street.latitude){
                point = new BMapGL.Point(street.longitude, street.latitude); // 地图中心点坐标
                that.setCenterLabel(that, point, street)
            }else{
                //要获取中心点
                var myGeo = new BMapGL.Geocoder();
                myGeo.getPoint(that.cityName + that.areaName + street.name, async (point)=>{
                    //获取到经纬度后，接口上报中心点
                    // let streetItem = that.jdList.filter(item=>item.name==street.name)[0]
                    // await commonUploadGeoCenterPoint({ latitude: point.lat,  longitude: point.lng, streetId: streetItem.id })
                    that.setCenterLabel(that, point, street)
                }, that.cityName)
            }   
        })
    },
    setCenterLabel(that, point, street){
        let statist = this.statistDataList.filter(item=>item.streetId==street.id);
        let targetCount = 0;
        if(statist.length>0){
            statist.forEach(item=>{
                targetCount += item.targetCount;
            })
        }
        if(targetCount>0){
            targetCount = ' ' + targetCount +'个案例'
        }else{
            targetCount = '';
        }
        var content = street.name + targetCount;
        var label = new BMapGL.Label(content, {       // 创建文本标注
            position: point,                          // 设置标注的地理位置
        })  
        // 点位添加至地图
        map.addOverlay(label); 
        //添加样式  
        label.setStyle({                              // 设置label的样式
            color: '#fff',
            fontSize: '12px',
            background: '#014C4F',
            border: 'none',
            padding: '5px',
            borderRadius: '10px'
        })  
        // 添加点击事件
        label.addEventListener("click", async () => {
            that.params.streetId = that.jdList.filter(item=>item.name==street.name)[0].id;
            that.handleSerch();
        })
    },
    //点击搜索
    async handleSerch(){
        // 清除之前的叠加层
        map.clearOverlays();
        //删除覆盖物
        this.removeCuston();
        
        this.params.pageIndex = 0;
        // 增加判断，如果有选择地址并且有选择范围
        if(this.address){
            let that = this;
            var options = {
                onSearchComplete: async (results)=>{
                    // 判断状态是否正确
                    if (local.getStatus() == BMAP_STATUS_SUCCESS){
                        that.params.centerLatitude = results.getPoi(0).point.lat
                        that.params.centerLongitude = results.getPoi(0).point.lng
                        that.params.radius = that.radius;

                        if(that.house_type==1&&that.yt_type==2){
                            // 如果走的房地产逻辑，就搜索该行政区街道的所有小区
                            // 有街道数据，则请求坐标接口
                            let params = JSON.parse(JSON.stringify(that.params));
                            if(params.tradeTypes!=""){
                                params.targetTradeType = JSON.parse(params.tradeTypes)[0]
                            }
                            let XQdata = await communityGetCollection(params);
                            that.setXQ(XQdata)
                            this.list = [];
                            this.total = 0;
                        }else{
                            that.getData();
                        }
                    }
                    that.getStatis();
                }
            };
            var local = new BMapGL.LocalSearch(map, options);
            local.search(this.cityName + this.address);
        }else if(this.house_type==4){
            // 区片价
            this.setCenterPoint();
            this.getData();
            let streetName = '';
            if(this.params.streetId){
                streetName = this.jdList.filter(item=>item.id==this.params.streetId)[0].name
            }
            //判断如果是小微园
            // 渲染街道数据 coding....
            let data = await regionPriceGetList({ propertyType: 102, cityId: this.params.cityId, pageCount: 200 })
            let priceList = data.list;
            this.AreaStreetList.forEach(item=>{
                if(this.areaName&&item.name!=this.areaName)return;
                //循环区域
                item.streets.forEach(street=>{
                    //streetName
                    if(streetName&&street.name!=streetName)return; //过滤掉非该街道的数据
                    let priceInfo = priceList.filter(price=>price.street.name==street.name)[0];
                    var fillColor = this.getRandomColor();
                    //循环街道
                    for(let key in street.points){
                        let lon;
                        let lat;
                        let pointList = [];
                        street.points[key].forEach((point,index)=>{
                            if(index%2==0){
                                lon = point;
                            }else{
                                lat = point;
                                pointList.push(new BMapGL.Point(lon,lat))
                            }
                        })
                        var cc = new BMapGL.Polygon(pointList, {
                            strokeOpacity: 0,
                            fillColor: fillColor
                        })
                        map.addOverlay(cc);
                    }
                    if(!priceInfo)return;
                    let point = new BMapGL.Point(street.longitude, street.latitude); // 地图中心点坐标
                    // 最高价high 最低价low
                    var label = new BMapGL.Label(`${priceInfo.street.name},均价:${priceInfo.average}万元/亩</br>最高:${priceInfo.high}万元/亩,最低:${priceInfo.low}万元/亩`, {       // 创建文本标注
                        position: point,                          // 设置标注的地理位置
                    })  
                    
                    // 点位添加至地图
                    map.addOverlay(label); 
                    //添加样式  
                    label.setStyle({                              // 设置label的样式
                        color: '#fff',
                        fontSize: '12px',
                        background: '#014C4F',
                        border: 'none',
                        padding: '5px',
                        borderRadius: '10px'
                    })  
                })
            })
        }else if (this.house_type==3){
            //判断是小微园
            this.list = [];
            this.total = 0;
            this.getStatis();
            this.getData();
        }else{
            this.params.centerLatitude = '';
            this.params.centerLongitude = '';
            this.params.radius = '';
            if(this.house_type==1&&this.yt_type==2){
                //代表住宅房地产，则不请求统计数据
                this.list = [];
                this.total = 0;
                if(this.params.streetId){
                    // 获取区域坐标范围、并定位至该街道
                    let area = this.areaList.filter(item=>this.params.areaId==item.id)[0]
                    let street = this.jdList.filter(item=>this.params.streetId==item.id)[0]
                    let streets = this.AreaStreetList.filter(item=>item.name==area.name)[0].streets.filter(item=>item.name==street.name);
                    this.setStreetMap(streets)
                    var point = new BMapGL.Point(streets[0].longitude, streets[0].latitude); // 地图中心点坐标
                    map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
                    // 有街道数据，则请求坐标接口
                    let params = JSON.parse(JSON.stringify(this.params));
                    if(params.tradeTypes!=""){
                        params.targetTradeType = JSON.parse(params.tradeTypes)[0]
                    }
                    // 有街道数据，则请求坐标接口
                    let XQdata = await communityGetCollection(params)
                    this.setXQ(XQdata)
                }else{
                    this.getStatis();
                }
                return;
            }
            this.getStatis();
            this.getData();
        }    
        if(this.house_type==1&&this.yt_type==2){
            //代表住宅房地产，则不请求统计数据
            return;
        }
        this.showCaseMap();
    },
    // 根据数据，设置小区坐标点，并设置点击事件
    setXQ(data){
        data.forEach(item=>{
            var point = new BMapGL.Point(item[1], item[2]); 
            let content = `${item[3]}|${item[4]}套` 
            var label = new BMapGL.Label(content, {       // 创建文本标注
                 position: point,                          // 设置标注的地理位置
                        // offset: new BMapGL.Size(10, 20)           // 设置标注的偏移量
            })  
            map.addOverlay(label); 
            label.setStyle({                              // 设置label的样式
                color: '#fff',
                fontSize: '14px',
                background: '#00ae66',
                border: 'none',
                padding: '5px',
                borderRadius: '10px'
            })
            // 设置点击事件
            label.addEventListener("click", async () => {
                // 请求该小区的案例
                this.params.communityId = item[0];
                this.getData();
            })
        })
    },
    // 获取统计数据
    async getStatis(){
        // 选择了城市、并且没有选择街道
        if(!this.params.streetId&&this.params.cityId){
            let params;
            if(this.params.areaId){
                //选择了区县
                params= {
                    cityId: this.params.cityId,
                    areaId: this.params.areaId,
                    propertyTypes: this.params.propertyTypes,
                    tradeTypes: this.params.tradeTypes,
                    geoLevel: 4,
                    rentFlag: this.params.rentFlag
                }
            }else if(this.params.cityId){
                //选择了城市
                //选择了区县
                params= {
                    cityId: this.params.cityId,
                    propertyTypes: this.params.propertyTypes,
                    geoLevel: 3,
                    tradeTypes: this.params.tradeTypes,
                    rentFlag: this.params.rentFlag
                }
                // 设置城市得中心点
                let city = this.cityList.filter(item=>this.params.cityId==item.id)[0]
                let point = new BMapGL.Point(city.longitude, city.latitude); // 地图中心点坐标
                map.centerAndZoom(point, 12);
            }
            //   获取统计的数值
            let data = await statisticGetGeoDataList(params);
            this.statistDataList = data.map(item=>{
                return { 
                    averageTradeUnitPrice: item.averageTradeUnitPrice,  
                    averageTradeTotalPrice: item.averageTradeTotalPrice,
                    targetCount: item.targetCount,
                    areaId: item.areaId,
                    streetId: item.streetId
                }
            })
        }

        this.writeMap();
    },
    //设置当前的中心点
    setCenterPoint(){
        if(this.params.streetId){
            let street = this.jdList.filter(item=>item.id==this.params.streetId)[0]
             // 当前条件是街道，则显示案例
             var myGeo = new BMapGL.Geocoder();
            myGeo.getPoint(this.cityName + this.areaName + street.name, function(point){
                    if(point){
                        map.centerAndZoom(point, 16);
                    }else{
                        alert('您选择的地址没有解析到结果！');
                    }
            }) 
        }else if(this.params.areaId){
            // 当前条件是街道，则显示案例
            var myGeo = new BMapGL.Geocoder();
            myGeo.getPoint(this.cityName + this.areaName, function(point){
                    if(point){
                        map.centerAndZoom(point, 14);
                    }else{
                        alert('您选择的地址没有解析到结果！');
                    }
            }) 
        }else{
            // 当前条件是街道，则显示案例
            var myGeo = new BMapGL.Geocoder();
            myGeo.getPoint(this.cityName, function(point){
                if(point){
                    map.centerAndZoom(point, 12);
                }else{
                    alert('您选择的地址没有解析到结果！');
                }
            }) 
        }
    },
    // 渲染地图
    async writeMap(){
        // 如果是写了地址则定位到地址点，并显示对应的半径
        if(this.address){
            // 0623增加一个判断，如果是房地产搜索具体地址，则走另外一个逻辑
            if(this.house_type==1&&this.yt_type==2){
                //走房地产逻辑
                // 定位到坐标点，并显示附近的小区案例
                var point = new BMapGL.Point(this.params.centerLongitude, this.params.centerLatitude); // 地图中心点坐标
                map.centerAndZoom(point, 16);  
                var marker = new BMapGL.Marker(point);        // 创建标注   
                map.addOverlay(marker);
                return;
            }
            // 其他的走土地逻辑
            var point = new BMapGL.Point(this.params.centerLongitude, this.params.centerLatitude); // 地图中心点坐标
            map.centerAndZoom(point, 16);  
            var marker = new BMapGL.Marker(point);        // 创建标注   
            map.addOverlay(marker);
            //判断有没有选择半径，然后画圆圈
            if(this.radius>0){
                var circle = new BMapGL.Circle(
                    point,this.radius,{
                    strokeColor:"red", 
                    strokeWeight:2, 
                    strokeOpacity:0.5
                }); //创建圆
                map.addOverlay(circle);
            }
        }else{
            if(this.params.streetId){
                // 当前条件是城市，则显示区县
                let city = this.cityList.filter(item=>this.params.cityId==item.id)[0]
                let area = this.areaList.filter(item=>this.params.areaId==item.id)[0]
                let street = this.jdList.filter(item=>this.params.streetId==item.id)[0]
                let streets = this.AreaStreetList.filter(item=>item.name==area.name)[0].streets;
                streets = streets.filter(item=>item.name==street.name)
                this.setStreetMap(streets)
                // 当前条件是街道，则显示案例
                var myGeo = new BMapGL.Geocoder();
                myGeo.getPoint(city.name + area.name + street.name, function(point){
                    if(point){
                        map.centerAndZoom(point, 16);
                    }else{
                        alert('您选择的地址没有解析到结果！');
                    }
                }) 
            }else if(this.params.areaId){
                // 当前条件是区县，则显示街道
                let city = this.cityList.filter(item=>this.params.cityId==item.id)[0]
                let area = this.areaList.filter(item=>this.params.areaId==item.id)[0]
                let streets = this.AreaStreetList.filter(item=>item.name==area.name)[0].streets;
                this.setStreetMap(streets)
                var myGeo = new BMapGL.Geocoder();
                myGeo.getPoint(city.name + area.name, function(point){
                    if(point){
                        map.centerAndZoom(point, 14);
                    }else{
                        alert('您选择的地址没有解析到结果！');
                    }
                }) 
            }else if(this.params.cityId){
                // 当前条件是城市，则显示区县
                let city = this.cityList.filter(item=>this.params.cityId==item.id)[0]
                let nameList = this.areaList.map(item=>item.name)
                this.setAreaMap(nameList, city.name)
            }  
        }
         
    },
    createDOM2() {
        // const img = document.createElement('img');
        // img.style.height = '240px';
        // img.style.width = '80px';
        // img.src = 'https://bj.bcebos.com/v1/mapopen-pub-jsapigl/assets/images/fire.gif';
        // img.draggable = false;
        // return img;

        const div = document.createElement('div');
        div.style.width = '30px';
        div.style.borderRadius = '50%';
        div.style.height = '30px';
        div.style.lineHeight = '30px';
        div.style.textAlign = 'center';
        div.style.background = 'rgba(255,255,255,.8)';
        div.style.margin = '0 auto';
        div.innerHTML = 'X'
        return div;
    },
    //地图上显示案例
    showCaseMap(){
        let that = this;
        // 创建自定义覆盖物DOM
        this.showCase.forEach(item=>{
            //标注图片
            var point = new BMapGL.Point(item[3], item[4]);
            var oss_base_url = OSS_BASE_URL + 'common/map_icon/'
            var url = oss_base_url +  item[1]+item[2] + '.png';
            if(item[6]>0){
                //如果日租金不为空就显示租
                url = oss_base_url + 'z' +item[2] + '.png';
            }
            var myIcon = new BMapGL.Icon(url, new BMapGL.Size(20, 20), {   
                anchor: new BMapGL.Size(10, 25),    
            });   
            var marker = new BMapGL.Marker(point, {icon: myIcon});  
            map.addOverlay(marker);

            marker.addEventListener("click", async () => {   
                let data = await targetInfo({ id: item[0] })
                //在添加钱先删除一遍覆盖物
                that.removeCuston();

                // 创建自定义覆盖物
                customOverlay = new BMapGL.CustomOverlay(()=>that.createDOM(data), {
                    point,
                    opacity: 0.5,
                    map: map,
                    offsetY: -60,
                    offsetX: 10,
                    properties: {
                        title: 'this is a title',
                        size: '100'
                    }
                });
                // 将自定义覆盖物添加到地图上
                map.addOverlay(customOverlay);

                //增加一个关闭按钮覆盖物
                closeOverlay = new BMapGL.CustomOverlay(()=>that.createDOM2(), {
                    point,
                    opacity: 1,
                    map: map,
                    offsetY: -20,
                    offsetX: 10,
                    properties: {
                        title: 'this is a title',
                        size: '100'
                    }
                });

                map.addOverlay(closeOverlay);

                closeOverlay.addEventListener("click", async () => {
                    that.removeCuston();
                })
            }); 
        })  

        // 小微园不存在交易情况，就一种颜色  0 小微园id 1.经度 2维度
        this.xwyShowCase.forEach(item=>{
            var point = new BMapGL.Point(item[1], item[2]);
            var url = OSS_BASE_URL + 'common/map_icon/xwy.png'
            var myIcon = new BMapGL.Icon(url, new BMapGL.Size(20, 20), {   
                anchor: new BMapGL.Size(10, 25),    
            });    
            var marker = new BMapGL.Marker(point, {icon: myIcon});  
            map.addOverlay(marker);
            marker.addEventListener("click", async () => {   
                let data = await parkInfo({ id: item[0] })
                data.is_park = 1;
                //在添加钱先删除一遍覆盖物
                map.removeOverlay(customOverlay);

                // 创建自定义覆盖物
                customOverlay = new BMapGL.CustomOverlay(()=>that.createDOM(data), {
                    point,
                    opacity: 0.5,
                    map: map,
                    offsetY: -60,
                    offsetX: 10,
                    properties: {
                        title: 'this is a title',
                        size: '100'
                    }
                });
                // 将自定义覆盖物添加到地图上
                map.addOverlay(customOverlay);
            }); 
        })

    },
    // 获取列表数据
    async getData(){
        let data = await targetGetList(this.params)
        this.list = data.list.map(item=>{
            let jzmjItem = item.fields.filter(item=>item.field.name=='建筑物面积');
            if(jzmjItem.length>0){
                item.jzmj = jzmjItem[0].decimalValue;
            }
            let fdhyPriceItem = item.fields.filter(item=>item.field.name=='房地合一成交单价');
            if(fdhyPriceItem.length>0){
                item.fdhyPrice = fdhyPriceItem[0].decimalValue;
            }
            let priceItem = item.fields.filter(item=>item.field.name=='成交总价');
            if(priceItem.length>0){
                item.price = priceItem[0].decimalValue;
            }
            let mjData = item.fields.filter(item=>item.field.name=='土地面积');
            if(mjData.length>0){
                item.mj = mjData[0].decimalValue;
            }
            let cjDateData = item.fields.filter(item=>item.field.name=='成交日期');
            if(cjDateData.length>0){
                item.cjDate = moment(cjDateData[0].longValue).format('YYYY-MM-DD'); 
            }
            let cjmjData = item.fields.filter(item=>item.field.name=='成交亩价');
            if(cjmjData.length>0){
                item.cjmj = cjmjData[0].decimalValue; 
            }
            let dayZjData = item.fields.filter(item=>item.field.name=='日租金');
            if(dayZjData.length>0){
                item.dayZj = dayZjData[0].decimalValue; 
            }
            return item;
        })
        this.total = data.totalCount;
    },
    // 修改区县列表
    changeArea(val){
        this.jdList = this.areaList.filter(item=>item.id==val)[0].streets;
        this.areaName = this.areaList.filter(item=>item.id==val)[0].name
        this.params.streetId = '';
    },
    // 修改城市列表
    async changeCity(val){
        this.cityName = this.cityList.filter(item=>item.id==val)[0].name
        this.areaName = '';
        this.getAreaList(val);
        this.params.areaId = '';
        this.params.streetId = '';
        //加载城市下的所有街道文件
        let data = await axios.get(`https://uniland-tst.oss-cn-hangzhou.aliyuncs.com/common/streetshapes/${val}.json`);
        let areaData = await axios.get(`https://uniland-tst.oss-cn-hangzhou.aliyuncs.com/common/areashapes/${val}.json`);
        this.AreaStreetList = data.data;
        this.AreaPointList = areaData.data;

        this.collectParams.cityId = val;
        this.getCollection();
    },
    // 获取区域列表
    async getAreaList(val){
        // 请求区县信息
        let data = await commonGetAreaList({ geoLevel: 4, cityId: val })
        this.areaList = data;
        
    },
    // 切换分页
    handleCurrentChange(val){
      this.params.pageIndex = val - 1;
      this.getData();
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 2px;
    position: relative;
    .case{
        position: absolute;
        bottom: 10px;
        right: 10px;
        background: #fff;
        padding: 10px;
        border-radius: 10px;
        font-size: 12px;
        .circle{
            width: 30px;
            height: 10px;
            display: inline-block;
            border-radius: 5px;
            background: linear-gradient(270deg, #FFCA37 0%, #FF9010 100%);
            margin: 0 5px 0 10px;
        }
    }
    .center{
        height: 40px;
        position: absolute;
        // width: calc(100% - 20px);
        left: 10px;
        top: 10px;
        z-index: 99;
        background: #fff;
        padding: 10px;
        border-radius: 10px;
        font-size: 12px;
        .item{
            border: 1px solid #ccc;
            cursor: pointer;
            display: inline-block;
            margin-right: 10px;
            height: 20px;
            line-height: 20px;
            padding: 0 10px;
            color: #333;
            border-radius: 5px;
            font-size: 12px;
        }
        .active{
            color: #fff;
            border: none;
            background: #039A92;
        }
    }
    .left{
        width: 220px;
        padding: 10px;
        background: #fff;
        position: absolute;
        left: 10px;
        top: 55px;
        z-index: 999;
        border-radius: 10px;
    }
    .right{
        position: absolute;
        top: 10px;
        right: 10px;
        width: 230px;
        background: #fff;
        padding: 10px;
        border-radius: 10px;
        z-index: 999;
        .top{
            font-size: 12px;
            height: 30px;
            line-height: 30px;
        }
        .content{
            .list::-webkit-scrollbar { /* Chrome, Edge, Safari */
            display: none;
            }
            .list{
                overflow: scroll;
                scrollbar-width: none;
                padding: 0px 0 10px;
                height: 500px;
                .item{
                    font-size: 12px;
                    border-bottom: 1px solid #eee;
                    padding:  10px 0;
                    .item_content{
                        display: inline-block;
                        overflow: hidden;
                        vertical-align: top;
                        .name{
                            margin: 0;
                            margin-bottom: 5px;
                            line-height: 20px;
                        }
                        .desc{
                            color: #bbb;
                            margin: 0;
                            margin-bottom: 5px;
                        }
                        .price{
                            margin: 0;
                            font-size: 13px;
                            color: #039A92;
                            font-weight: bold;
                        }
                    }
                }
            }
            margin-bottom: 20px;
            .pages{
                text-align: center;
                overflow: hidden;
                position: absolute;
                left: -7px;
            }
        }
    }
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>